<template>
  <div :class="$style['advanced-pop-container']">
    <div :class="$style['form-container']">
      <FormProps
        ref="formProp"
        v-model:formModel="formModel"
        :formItems="advancedSearchInputs"
      ></FormProps>
    </div>
    <div :class="$style['advanced-pop-footer']">
      <el-button type="primary" size="mini" @click="save">确定</el-button>
      <el-button size="mini" @click="resetForm">重置</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import FormProps from './FormProps.vue'
export default defineComponent({
  name: 'AdvancedPop',
  props: {
    advancedSearchInputs: {
      type: Object,
    },
    saveAdvancedForm: {
      type: Function,
    },
  },
  emit: ['close'],
  components: {
    FormProps,
  },
  computed: {
    // 创建form model
    formModel: function (): any {
      const rst: any = {}
      for (let key in this.advancedSearchInputs) {
        rst[key] = this.advancedSearchInputs[key]?.initial || ''
      }
      return reactive(rst)
    },
  },
  methods: {
    // 重置form
    resetForm(this: any) {
      this.$refs.formProp.$refs.form.resetFields()
    },
    save(this: any) {
      this.saveAdvancedForm(this.formModel)
      this.$emit('close')
    },
  },
})
</script>

<style module lang="scss">
.advanced-pop-container {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 520px;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  background: #fff;
  z-index: 2001;
  padding: 10px;
  .advanced-pop-footer {
    height: 35px;
    text-align: right;
    width: 100%;
    margin-top: 10px;
  }
}
</style>
